<template>
  <div class='app-container'>
    <!-- 数据 -->
    <div class="oneCard">
      <!--<button @click="tretPriceTask">价格算法测试</button>-->
      <button @click="Test">测试</button>
      <el-row :gutter="30">
        <el-col :span="6">
          <el-card class="scaleBig">
            <h3>今日充电电量</h3>
            <h4>{{ratioData.todayPower}}度</h4>
            <p>环比增长：<span :class="ratioData.todayPowerQOQ>0?'red':'green'">{{ratioData.todayPowerQOQ}}%</span></p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="scaleBig">
            <h3>今日充电次数</h3>
            <h4>{{ratioData.todayCount}}次</h4>
            <p>环比增长：<span :class="ratioData.todayCountQOQ>0?'red':'green'">{{ratioData.todayCountQOQ}}%</span></p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="scaleBig">
            <h3>今日充电金额</h3>
            <h4>{{ratioData.todayMoney}}元</h4>
            <p>环比增长：<span :class="ratioData.todayMoneyQOQ>0?'red':'green'">{{ratioData.todayMoneyQOQ}}%</span></p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="scaleBig">
            <h3>今日注册用户数</h3>
            <h4>{{ratioData.todayRegister}}人</h4>
            <p>环比增长：<span :class="ratioData.todayRegisterQOQ>0?'red':'green'">{{ratioData.todayRegisterQOQ}}%</span></p>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- echarts -->
    <div class="twoEchart">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-card>
            <div style="display: flex;justify-content: space-between;">
              <div style="font-size: 18px;font-weight: 600;">本周充电电量与使用次数分析</div>
              <div style="display: flex">
                <el-button class='bg_btn' size="mini" :id="typeAnalyse === 'week'? 'btn': ''"
                           @click="typeAnalyse = 'day'">天
                </el-button>
                <el-button class='bg_btn' size="mini" :id="typeAnalyse === 'day'? 'btn': ''"
                           @click="typeAnalyse = 'week'">周
                </el-button>
              </div>
            </div>
            <analyse-echart :dataList="analyseData"/>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div style="display: flex;justify-content: space-between;">
              <div style="font-size: 18px;font-weight: 600;">本周充电桩使用率</div>
              <div style="display: flex">
                <el-button class='bg_btn' size="mini" :id="typeRate === 'week'? 'btn': ''" @click="typeRate = 'day'">天
                </el-button>
                <el-button class='bg_btn' size="mini" :id="typeRate === 'day'? 'btn': ''" @click="typeRate = 'week'">周
                </el-button>
              </div>
            </div>
            <rate-echart :dataList="rateData"/>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- echarts -->
    <div class="threeEchart">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-card>
            <div style="font-size: 18px;font-weight: 600;">本周注册用户量</div>
            <register-echart :dataList="registerData"/>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div style="font-size: 18px;font-weight: 600;">今日各充电站充电电量</div>
            <electric-echart :dataList="electricData"/>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 充电订单 -->
    <div class="fourOrder">
      <el-card>
        <el-row class="alarmBox">
          <el-row>
            <div style="font-size: 18px;font-weight: 600;">今日充电订单</div>
          </el-row>
          <el-row class="tableHead">
            <el-col :span="4">
              <span>订单号</span>
            </el-col>
            <el-col :span="4">
              <span>设备编号</span>
            </el-col>
            <el-col :span="4">
              <span>充电时长(h)</span>
            </el-col>
            <el-col :span="4">
              <span>充电电量(kwh)</span>
            </el-col>
            <el-col :span="4">
              <span>创建时间</span>
            </el-col>
            <el-col :span="4">
              <span>场站</span>
            </el-col>
          </el-row>
          <scroll class="scrollStyle" :data="orderList" :class-option="defaultOption">
            <el-row v-for="(item,index) in orderList" :key="index" style="text-align: center;">
              <el-col :span="4">
                <span>{{ item.orderInfoCode }}</span>
              </el-col>
              <el-col :span="4">
                <span>{{ item.deviceCode }}</span>
              </el-col>
              <el-col :span="4">
                <span>{{ item.totalTime }}</span>
              </el-col>
              <el-col :span="4">
                <span>{{ item.totalPower }}</span>
              </el-col>
              <el-col :span="4">
                <span>{{ item.createTime }}</span>
              </el-col>
              <el-col :span="4">
                <span>{{ item.chargeStationName }}</span>
              </el-col>
            </el-row>
          </scroll>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
  import scroll from 'vue-seamless-scroll'
  import analyseEchart from '@/views/components/indexEcharts/analyseEchart'
  import rateEchart from '@/views/components/indexEcharts/rateEchart'
  import registerEchart from '@/views/components/indexEcharts/registerEchart'
  import electricEchart from '@/views/components/indexEcharts/electricEchart'
  import {
    tretPriceTask,
    Test,
    getLinkRelativeRatioCount,
    getChargingCapacityChargingNumber,
    getRegistrationVolume,
    getTodayStationSumPower,
    getTodayChargeOrder,
    getChargingStationUsageRate
  } from '@/api/index.js'

  export default {
    components: { scroll, analyseEchart, rateEchart, registerEchart, electricEchart },
    name: 'index',
    data() {
      return {
        ratioData: {}, //环比统计
        typeAnalyse: 'day', //分析
        typeRate: 'day', //使用率
        analyseData: [],
        rateData: [],
        registerData: {},
        electricData: [],
        orderList: []
      }
    },
    computed: {
      defaultOption() {
        return {
          step: 0.2, // 数值越大速度滚动越快
          limitMoveNum: 3, // 开始无缝滚动的数据量 this.orderList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 3000 // 单步运动停止的时间(默认值1000ms)
        }
      }
    },
    mounted() {
      this.getRatio()
      this.getAnalyse()
      this.getRate()
      this.getRegister()
      this.getElectric()
      this.getOrder()
    },
    watch: {
      typeAnalyse: {
        // 自动触发,只能使用handler
        handler(newVal, oldVal) {
          this.getAnalyse()
        }
      },
      typeRate: {
        // 自动触发,只能使用handler
        handler(newVal, oldVal) {
          this.getRate()
        }
      }
    },
    methods: {
      // tretPriceTask() {
      //   let params = {
      //     startTime: '2024-04-16 16:44:24',
      //     endTime: '2024-04-16 16:55:36',
      //     power: '3.13',
      //     totalTime: 10,
      //   }
      //   tretPriceTask(params)
      // },
      Test() {
        let params = {
          // StartChargeSeq: '20240507120830440309000200020201',\
          // LastQueryTime: '20240507120830440309000200020201',
          // PageNo: 1,
          // PageSize: 1,
          // StationIDs: ['44030900020001', '44030900020002']
          // StationID: '1004',
          // StartTime: '2024-01-01',
          // EndTime: '2024-05-01',
          EquipAuthSeq: '123456789',
          ConnectorID: '4403090002000201',
        }
        Test(params).then(res =>{
          debugger
        })
      },
      // 环比统计
      getRatio() {
        getLinkRelativeRatioCount().then(res => {
          if (res.code === 200) {
            this.ratioData = res.data
          }
        })
      },
      // 本周充电电量与使用次数分析
      getAnalyse() {
        getChargingCapacityChargingNumber({ timeType: this.typeAnalyse }).then(res => {
          if (res.code === 200) {
            this.analyseData = res.data
          }
        })
      },
      // 本周充电桩使用率
      getRate() {
        getChargingStationUsageRate({ timeType: this.typeRate }).then(res => {
          if (res.code === 200) {
            this.rateData = res.data
          }
        })
      },
      // 本周注册用户量
      getRegister() {
        getRegistrationVolume().then(res => {
          if (res.code === 200) {
            this.registerData = res.data
          }
        })
      },
      // 今日各充电站充电电量
      getElectric() {
        getTodayStationSumPower().then(res => {
          if (res.code === 200) {
            this.electricData = res.data
          }
        })
      },
      // 今日充电订单
      getOrder() {
        getTodayChargeOrder().then(res => {
          if (res.code === 200) {
            this.orderList = res.data
          }
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  .oneCard {
    ::v-deep .el-card__body {
      padding: 10px 20px !important;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    h3 {
      margin: 10px 0 !important;
      font-weight: 600;
    }

    h4 {
      margin: 10px 0 !important;
      color: #1affdf;
      font-size: 18px;
      font-weight: 600;
    }

    p {
      margin: 10px 0 !important;
      font-weight: 600;

      .red {
        color: #ff344d;
      }

      .green {
        color: #a7fb23;
      }
    }

    .scaleBig {
      transition: transform 0.3s ease;
    }

    .scaleBig:hover {
      transform: scale(1.05);
    }
  }

  .twoEchart {
    margin: 20px 0;

    .echart {
      width: 100%;
      height: 30vh;
    }
  }

  .threeEchart {
    margin-bottom: 20px;

    .echart {
      width: 100%;
      height: 30vh;
    }
  }

  .fourOrder {
    .alarmBox {
      width: 100%;

      .tableHead {
        text-align: center;
        height: 5vh;
        border-bottom: 1px solid #ccc;

        span {
          line-height: 5vh;
        }
      }

      .scrollStyle {
        height: 22vh;
        overflow: hidden;
        margin-top: 1vh;

        span {
          line-height: 3vh;
        }
      }
    }
  }

  .bg_btn {
    width: 40px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    background: #1d58a9;
    border: 1px solid #1d58a9;
    border-radius: 1px;
    color: white;
    margin-left: 0 !important;
  }

  #btn {
    background: none;
    color: black;
  }
</style>
